<template>
  <div>
    <divider><b>排列3奖池超限预警</b></divider>

    <group>
      <cell style="background-color:#E4E8EA"
        is-link
        :border-intent="false"
        :arrow-direction="showContent002 ? 'up' : 'down'"
        @click.native="showContent002 = !showContent002">
        <span slot="title" style="color:#3D3D3D; font-size:14px;">1. 排列3奖池超限预警(2018.01.01)</span>
        <span style="color:red;font-size:14px;">未处理</span>
      </cell>
      <template v-if="showContent002">
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>事项：</b>    预警1</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>状态：</b>    未处理</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>时间：</b>    2018-01-01 10:10:10</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>内容：</b>    </p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>处理人：</b>  </p>
        </cell-box>
      </template>

      <cell style="background-color:#E4E8EA"
        is-link
        :border-intent="false"
        :arrow-direction="showContent003 ? 'up' : 'down'"
        @click.native="showContent003 = !showContent003">
        <span slot="title" style="color:#3D3D3D; font-size:14px;">2. 排列3奖池超限预警(2018.01.01)</span>
        <span style="color:green;font-size:14px;">处理中</span>
      </cell>
      <template v-if="showContent003">
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>事项：</b>    预警2</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>状态：</b>    处理中</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>时间：</b>    2018-01-01 10:10:10</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>内容：</b>    排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>处理人：</b>  路人甲</p>
        </cell-box>
      </template>

      <cell style="background-color:#E4E8EA"
            is-link
            :border-intent="false"
            :arrow-direction="showContent004 ? 'up' : 'down'"
            @click.native="showContent004 = !showContent004">
        <span slot="title" style="color:#3D3D3D; font-size:14px;">2. 排列3奖池超限预警(2018.01.01)</span>
        <span style="color:green;font-size:14px;">处理中</span>
      </cell>
      <template v-if="showContent004">
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>事项：</b>    预警2</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>状态：</b>    处理中</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>时间：</b>    2018-01-01 10:10:10</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>内容：</b>    排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>处理人：</b>  路人甲</p>
        </cell-box>
      </template>

      <cell style="background-color:#E4E8EA"
            is-link
            :border-intent="false"
            :arrow-direction="showContent005 ? 'up' : 'down'"
            @click.native="showContent005 = !showContent005">
        <span slot="title" style="color:#3D3D3D; font-size:14px;">2. 排列3奖池超限预警(2018.01.01)</span>
        <span style="color:green;font-size:14px;">处理中</span>
      </cell>
      <template v-if="showContent005">
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>事项：</b>    预警2</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>状态：</b>    处理中</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>时间：</b>    2018-01-01 10:10:10</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>内容：</b>    排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>处理人：</b>  路人甲</p>
        </cell-box>
      </template>

      <cell style="background-color:#E4E8EA"
            is-link
            :border-intent="false"
            :arrow-direction="showContent006 ? 'up' : 'down'"
            @click.native="showContent006 = !showContent006">
        <span slot="title" style="color:#3D3D3D; font-size:14px;">2. 排列3奖池超限预警(2018.01.01)</span>
        <span style="color:green;font-size:14px;">处理中</span>
      </cell>
      <template v-if="showContent006">
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>事项：</b>    预警2</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>状态：</b>    处理中</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>时间：</b>    2018-01-01 10:10:10</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>内容：</b>    排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警。排列3奖池超限预警</p>
        </cell-box>
        <cell-box :border-intent="true" class="sub-item">
          <p style="color:#787878; font-size:14px;vertical-align:middle;"><b>处理人：</b>  路人甲</p>
        </cell-box>
      </template>

    </group>
  </div>
</template>

<script>
  import {Divider, Group, Cell, CellBox} from 'vux'

  export default {
    components: {
      Divider,
      Group,
      Cell,
      CellBox
    },
    mounted () {
    },
    methods: {
    },
    data () {
      return {
        showContent002: false,
        showContent003: false,
        showContent004: false,
        showContent005: false,
        showContent006: false,
        showContent007: false,
        list: [{
          label: '预警1',
          value: '未处理 2018-01-01 10:10:10'
        }, {
          label: '预警2',
          value: '已处理 2018-01-01 10:10:10'
        }, {
          label: '预警3',
          value: '处理中 2018-01-01 10:10:10'
        }]
      }
    }
  }
</script>
